<template>
  <view class="page pageBg-color">

    <!--  -->
    <com-nav-bar title="我的"></com-nav-bar>

    <scroll-view 
      scroll-y 
      refresher-enabled
      @refresherrefresh="onRefresh" 
      :refresher-triggered="isTriggered"
      refresher-background="#fff" 
      class="scroll-view"
    >

      <!--  -->
      <view @click="goLogin" class="userInfo">
        <view class="avatar">
          <image class="image" src="@/static/images/image_demo2.jpg" mode="scaleToFill" />
        </view>
        <view class="nick-name">
          <text>{{ userInfo?.address.province }} - {{ userInfo?.address.city }}</text>
        </view>
        <view class="address">
          <text>{{ userInfo?.IP }}</text>
        </view>
      </view>

      <!--  -->
      <view class="section">
        <view class="row" @click="goMyDownload">
          <view class="left">
            <uni-icons type="download-filled" size="20" color="#28B389"></uni-icons>
            <view class="lable">
              <text>我的下载</text>
            </view>
          </view>
          <view class="right">
            <view class="num">{{ userInfo?.downloadSize }}</view>
            <uni-icons type="forward" size="15" color="#aaa"></uni-icons>
          </view>
        </view>

        <view class="row" @click="goMyScore">
          <view class="left">
            <uni-icons type="star-filled" size="20" color="#28B389"></uni-icons>
            <view class="lable">
              <text>我的评分</text>
            </view>
          </view>
          <view class="right">
            <view class="num">{{ userInfo?.scoreSize }}</view>
            <uni-icons type="forward" size="15" color="#aaa"></uni-icons>
          </view>
        </view>

        <view class="row">
          <view class="left">
            <uni-icons type="chatboxes-filled" size="20" color="#28B389"></uni-icons>
            <view class="lable">
              <text>联系客服</text>
            </view>
          </view>
          <view class="right">
            <uni-icons type="forward" size="15" color="#aaa"></uni-icons>
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <button class="btn-contact" open-type="contact">联系客服</button>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <button class="btn-contact" @click="clickContact">联系客服</button>
          <!-- #endif -->
        </view>
      </view>

      <!--  -->
      <view class="section">
        <view class="row" @click="goNoticeDetail('653507c6466d417a3718e94b')">
          <view class="left">
            <uni-icons type="notification-filled" size="20" color="#28B389"></uni-icons>
            <view class="lable">
              <text>订阅更新</text>
            </view>
          </view>
          <view class="right">
            <uni-icons type="forward" size="15" color="#aaa"></uni-icons>
          </view>
        </view>

        <view class="row" @click="goNoticeDetail('6536358ce0ec19c8d67fbe82')">
          <view class=" left">
            <uni-icons type="flag-filled" size="20" color="#28B389"></uni-icons>
            <view class="lable">
              <text>常见问题</text>
            </view>
          </view>
          <view class="right">
            <uni-icons type="forward" size="15" color="#aaa"></uni-icons>
          </view>
        </view>
      </view>

    </scroll-view>

  </view>
</template>


<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { API } from "@/services/api";
import { ref } from "vue";

const userInfo: any = ref(null); // 用户个人信息
const isTriggered = ref(false); // 当前下拉刷新状态

// 监听页面加载
onLoad(() => {
  getUserInfo();
})

// 用户下拉执行需要执行的函数
const onRefresh = () => {
  isTriggered.value = true; // 触发下拉刷新动画
  userInfo.value = null;
  getUserInfo();
};

// 获取用户个人信息
const getUserInfo = () => {
  API.userInfo()
    .then((res: any) => {
      userInfo.value = res.data;
    })
    .catch((err: any) => {
      console.log(err);
    })
    .finally(() => {
      isTriggered.value = false;
    });
};

// 去到登录页面
const goLogin = () => {
  uni.navigateTo({
    url: `/pages/pkgA/login/index`
  })
};

// 去到我的下载
const goMyDownload = () => {
  uni.navigateTo({
    url: `/pages/pkgB/typeList/index?name=我的下载&type=download`
  })
};

// 去到我的评分
const goMyScore = () => {
  uni.navigateTo({
    url: `/pages/pkgB/typeList/index?name=我的评分&type=score`
  })
};

// 订阅更新、常见问题
const goNoticeDetail = (id: string) => {
  uni.navigateTo({
    url: `/pages/pkgB/noticeDetail/index?id=${id}`
  })
};

// h5 联系客服
// #ifdef H5
const clickContact = () => {
  uni.showModal({
    title: "联系客服",
    content: "是否拨打电话114？",
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: "114"
        })
      } else if (res.cancel) {
        uni.showToast({
          title: "取消拨打电话",
          icon: "none"
        });
      };
    }
  });
};
// #endif
</script>

<style lang="scss" scoped>
@use "style.scss";
</style>